<#-- 设置输出格式为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <style>
        html{
            font-family: SimSun, serif;}
        @page {
            size: 210mm 297mm; /*设置纸张大小:A4(210mm 297mm)、A3(297mm 420mm) 横向则反过来*/
        }
        .container {
            width: 210mm;  /* A4纸宽度 */
            box-sizing: border-box;
        }
        
        /* 准考证卡片样式 */
        .ticket-card {
            width: 90mm;  /* 两列布局 */
            height: 50mm;  /* 调整高度 */
            border: 1px solid #000;
            padding: 2mm 5mm 5mm 5mm;
            margin-bottom: 2mm;  /* 减小间距 */
            display: inline-block;
            vertical-align: top;
            font-size: 12px;  /* 增大字体 */
            box-sizing: border-box;
            position: relative;
        }
        
        /* 标题样式 */
        .title {
            text-align: center;
            font-size: 14px;  /* 增大字体 */
            font-weight: 600;  /* 加粗 */
            margin-bottom: 2px;  /* 向上移动 */
        }
        
        /* 右侧区域样式 */
        .right-area {
            position: absolute;
            top: 15px;  /* 向上移动 */
            right: 5mm;
            width: 20mm;
            height: 50mm;  /* 调整高度 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 头像和二维码样式 */
        .avatar-area, .qr-code {
            width: 20mm;
            text-align: center;
        }
        
        .avatar-area {
            width:20mm;
            height: 25mm;  /* 调整高度 */
            line-height: 25mm;
            border: 1px solid #ccc;  /* 边框颜色变淡 */
            margin-bottom: 1mm;
        }

        .avatar-area img{
            width: 100%;
            height: 100%;
        }
        
        .qr-code {
            height: 20mm;  /* 正方形 */
            line-height: 20mm;
            border: none;  /* 去除边框 */
            scale: 1.2;
        }
        
        /* 信息行样式 */
        .info-row {
            margin: 5px 0;  /* 增大间距 */
            word-wrap: break-word;  /* 自动换行 */
            padding-right: 22mm;  /* 确保文本不被遮挡 */
            font-weight: 500;  /* 加粗 */
        }
    </style>
</head>
<body>
<div class="container">
    <#list tickets as ticket>
    <div class="ticket-card">
        <div class="title">准考证标题</div>
        
        <div class="info-row">
            姓名：${(ticket.name)!''} 
            性别：${(ticket.sex)!''}
        </div>
        
        <div class="right-area">
            <div class="avatar-area">
                <#if ticket.avatarUrl?? && ticket.avatarUrl != ''>
                    <img src="${ticket.avatarUrl}" style="max-width: 100%; max-height: 100%;" />
                <#else>
                    头像
                </#if>
            </div>
            
            <div class="qr-code">
                <#if ticket.studyCodeQrCode?? && ticket.studyCodeQrCode != ''>
                    <img src="data:image/png;base64,${ticket.studyCodeQrCode}" style="max-width: 100%; max-height: 100%;" />
                <#else>
                    二维码
                </#if>
            </div>
        </div>
        
        <div class="info-row">
            学校：${(ticket.schoolName)!''}
        </div>
        
        <div class="info-row">
            班级：${(ticket.gradeName)!''} / ${(ticket.classesName)!''}
        </div>
        
        <div class="info-row">
            学籍号：${(ticket.studyCode)!''}
        </div>
        
        <div class="info-row">
            科目：
            <#if ticket.projectNameList?? && ticket.projectNameList?size gt 0>
                <#list ticket.projectNameList as project>
                    ${project}<#if project_has_next>、</#if>
                </#list>
            </#if>
        </div>
        
        <div class="info-row">
            分组编号：${(ticket.groupNo)!''}
        </div>
        <div class="info-row">
            组号：${(ticket.showGroupNo)!''}
        </div>
        <div class="info-row">
            组内序号：${(ticket.groupInNo)!''}
        </div>

    </div>
    </#list>
</div>
</body>
</html> 